<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>分类</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/categories.css"/>
</head>
<body>
    
    <header class="mui-bar mui-bar-nav header-top">
        <a href="javascript:history.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        
        <!--搜索框-->
        <form action="search.html" method="get" id="search">
        	<div class="mui-input-row mui-search">
        		<input type="search" class="mui-input-clear" placeholder="请输入搜索关键字">
        	</div>
        </form>
        <button class="mui-icon mui-pull-right" id="submit">搜索</button>
    </header>
    
    <!--底部选项卡-->
    <nav class="mui-bar mui-bar-tab nav-bottom">
        <a class="mui-tab-item" href="index.html">
            <span class="mui-icon"><img src="img/home.png"/></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item  mui-active" href="categories.html">
            <span class="mui-icon"><img src="img/categories-active.png"/></span>
            <span class="mui-tab-label">分类</span>
        </a>
        <a class="mui-tab-item" href="building.html">
            <span class="mui-icon"><img src="img/game.png"/></span>
            <span class="mui-tab-label">游戏</span>
        </a>
        <a href="shopping_cart.html" class="mui-tab-item">
            <span class="mui-icon"><img src="img/shopping.png"/></span>
            <span class="mui-tab-label">购物车</span>
        </a>
        <a class="mui-tab-item" href="login.html">
            <span class="mui-icon"><img src="img/user.png"/></span>
            <span class="mui-tab-label">我的</span>
        </a>
    </nav>
    
	<div class="mui-content box">
		<!--滚动区域-->
		<div class="mui-scroll-wrapper left-list">
			<div class="mui-scroll">
				
			<!--一级分类-->
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">分类 1</li>
				<li class="mui-table-view-cell">分类 2</li>
				<li class="mui-table-view-cell">分类 3</li>
			</ul>
			</div>
		</div>
		<!--滚动区域-->
		<div class="mui-scroll-wrapper right-list">
			<div class="mui-scroll">
				<!--二级分类-->
				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
						<a href="category_listings.html">
							<span class="mui-icon"><img src="img/download.jpg"/></span>
							<div class="mui-media-body">1干果零食</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
						<a href="category_listings.html">
							<span class="mui-icon"><img src="img/download.jpg"/></span>
							<div class="mui-media-body">干果零食</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
						<a href="category_listings.html">
							<span class="mui-icon"><img src="img/download.jpg"/></span>
							<div class="mui-media-body">干果零食</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
						<a href="#">
							<span class="mui-icon"><img src="img/download.jpg"/></span>
							<div class="mui-media-body">干果零食</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
						<a href="#">
							<span class="mui-icon"><img src="img/download.jpg"/></span>
							<div class="mui-media-body">干果零食</div>
						</a>
					</li>
				</ul>
				
				
				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
						<a href="category_listings.html">
							<span class="mui-icon"><img src="img/logo1.png"/></span>
							<div class="mui-media-body">2干果零食</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
						<a href="category_listings.html">
							<span class="mui-icon"><img src="img/logo1.png"/></span>
							<div class="mui-media-body">干果零食</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
						<a href="category_listings.html">
							<span class="mui-icon"><img src="img/logo1.png"/></span>
							<div class="mui-media-body">干果零食</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
						<a href="#">
							<span class="mui-icon"><img src="img/logo1.png"/></span>
							<div class="mui-media-body">干果零食</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
						<a href="#">
							<span class="mui-icon"><img src="img/logo1.png"/></span>
							<div class="mui-media-body">干果零食</div>
						</a>
					</li>
				</ul>
				
				
				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
						<a href="category_listings.html">
							<span class="mui-icon"><img src="img/logo1.png"/></span>
							<div class="mui-media-body">3干果零食</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
						<a href="category_listings.html">
							<span class="mui-icon"><img src="img/logo1.png"/></span>
							<div class="mui-media-body">干果零食</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
						<a href="#">
							<span class="mui-icon"><img src="img/logo1.png"/></span>
							<div class="mui-media-body">干果零食</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
						<a href="#">
							<span class="mui-icon"><img src="img/logo1.png"/></span>
							<div class="mui-media-body">干果零食</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
						<a href="#">
							<span class="mui-icon"><img src="img/logo1.png"/></span>
							<div class="mui-media-body">干果零食</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
    
    
    
    
    <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	mui.init()
    	//初始化滚动区域
		mui('.mui-scroll-wrapper').scroll({
			deceleration: 0.0005, //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			indicators: false,
		})
		
		$('.left-list ul li').eq(0).addClass('current')
		$('.left-list ul li').click(function(){
			$('.left-list ul li').removeClass('current')
			$(this).addClass('current')
			$('.right-list .mui-scroll>ul').hide()
			$('.right-list .mui-scroll>ul').eq($(this).index()).show()
		})
		/*******	搜索		******/
		$('#submit').click(()=>{
			$('#search').submit()
		})
    </script>
</body>
</html>
